<!DOCTYPE html>
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <header th:replace="header::html"></header>
</head>

<body>


<div class="layui-fluid">
    <div class="layui-row  layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form  layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="ntitle" placeholder="请输入需求关键字" autocomplete="off"
                                   class="layui-input">
                        </div>


                        <div class="layui-input-inline">
                            <select name="verifyState" lay-filter="verifyState">
                                <option value="">请选择订单状态</option>
                                <option value="0">待付款</option>
                                <option value="1">已付款</option>
                            </select>
                        </div>



                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-hide" id="order" lay-filter="order"></table>
                </div>

                <div class="layui-card-body ">
                    <script type="text/html" id="barDemo">
                        {{# if(d.pid === 8){     }}
                        <a class="layui-btn layui-btn-sm layui-btn-xs" lay-event="verify">进入订单详情</a>
                        {{#  } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
	layui.use('table', function () {
		var table = layui.table,
			form = layui.form;
		table.render({
			elem: '#order'
			, url: '/api-front/orderList' //数据接口
			, page: true //开启分页
			, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			, response: {
				dataName: 'datas' //规定数据列表的字段名称，默认：data
			}
			, cols: [
				[ //表头

					{field: 'oid', title: 'ID', align: 'center', sort: true}
					, {field: 'workid', title: '作品编号', align: 'center'}
					, {field: 'pid', title: '订单状态', align: 'center', sort: true,templet:function (st) {
						return st.pid== '8'?"待付款":"已付款"}}
					,{field: 'ostarttime', title: '购买时间', align: 'center'}
					, {field: 'oendtime', title: '结束时间', align: 'center'}
					, {title: '操作', toolbar: '#barDemo', align: 'center'}
				]
			],

		});

		//监听工具条
		table.on('tool(order)', function (obj) {
			var data = obj.data;//获取点击行数据
			if (obj.event === 'verify') {

				xadmin.open('订单付款', '/api-front/userOrder/?workid=' + data.workid);

			}
		});

		//搜索
		form.on('submit(search)', function (data) {
			var data = data.field;
			table.render({
				elem: '#order'
				, url: '' //数据接口
				, page: true //开启分页
				, where: {
					"ntitle": data.ntitle,
					"needType": data.needType,
					"verifyState": data.verifyState,
					"tenderState": data.tenderState,
					"startTime": data.startDate,
					"ebdTime": data.endDate
				}
				, response: {
					countName: 'count', //规定数据总数的字段名称，默认：count
					dataName: 'datas' //规定数据列表的字段名称，默认：data
				}
				, cols: [
					[ //表头
						{type: 'checkbox', fixed: 'left'}
						, {field: 'nid', title: 'ID', align: 'center', sort: true, width: "5%"}
						, {field: 'ntitle', title: '需求标题', align: 'center'}
						, {field: 'nmoney', title: '佣金', align: 'center', sort: true, width: "5%"}
						, {field: 'nstarttime', title: '发布时间', align: 'center'}
						, {field: 'nendtime', title: '结束时间', align: 'center'}
						, {field: 'nrealtime', title: '工期', align: 'center'}
						, {field: 'nstatus', title: '状态', align: 'center', width: "5%"}
						, {title: '操作', toolbar: '#barDemo', align: 'center'}
					]
				]
			});
			return false;
		});
		//checkPermission();
	});
</script>
</html>